<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<script src="js/jquery-1.11.1.js"></script>
	</head>
	<style>
		.box {
		    width: 100px;
		    height: 100px;
		    border: 1px solid #000;
		    text-align: center;
		    line-height: 100px;
		}
	</style>
	<body>
		<button>按钮</button>
		<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eum exercitationem tenetur debitis soluta quisquam velit est? Enim explicabo dolorem dolore cum deleniti minus aspernatur aliquam minima, ab dicta, voluptatum neque!</p >
		<div style="height: 100px;width: 100px;background-color: #333">
		<span>文本</span>
		<input type="button" value="按钮2">
		<input type="text">
		</div>
		<script>
			$("input[type='button']").click(function(){
				$("input[type='text']").val("文本框输出的效果");
			});
			$("div").mouseenter(function(){
				$("span").html("超文本");
			});
			
			/*JQuery操作DOM  通过点击一个元素绑定一个事件给另外一个元素改变效果
			.html()函数：  增加一个元素，覆盖原来的html
			.val函数：     input元素使用，改变修改表单元素中文本
			*/
		   $('button').click(function(){
			  //DOM操作---改变页面上的其他元素
			  //DOM操作---改变p元素改成marquee元素
		   $('p').html("<marquee>跑马灯-----</marquee>");
		   });
		   /*  练习：100*100框，div 鼠标移动上去，文本改成超文本
		        按钮和输入框，点击按钮，输入框输出文字效果
				
		   */
		  
		  
		    $('.box').mouseenter(function () {
		        $().html('');
		    });
		  
		    $('.box').mouseleave(function () {
		        $().html('原始文本');
		    });
		</script>
		<div class="box">原始文本</div>
	</body>
</html>